<template>
  <div class="bigbox">
    <div v-if="toplist">
      <swiper
        :qualityobj="{
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
            delay: 2500,
            disableOnInteraction: true,
          },
          pagination: {
          el: '.swiper-pagination',
          clickable: true,
          },
            }"
        qualityclass="toplist"
      >
        <div
          class="swiper-slide"
          v-for="(topimg,index) in toplist.banners"
          :key="index"
          @click="getid(topimg)"
        >
          <img class="imgsize" :src="topimg.bannerImgSrc" />
        </div>
      </swiper>
    </div>
    <!-- 中部模块 -->
    <ul v-if="bottomlist">
      <li class="moduleContent" v-for="(data,bottomindex) in bottomlist" :key="bottomindex">
        <p class="headline">{{data.moduleName}}</p>
        <p style="color:#cccccc;margin-bottom:10px;">{{data.moduleDescription}}</p>
        <!-- 惬意沙发 -->
        <ul class="lunbobox" v-if="bottomindex===0">
          <swiper
            :qualityobj="{
              slidesPerView: 4,
              spaceBetween: 20,
              freeMode: true,
            }"
            qualityclass="bottomlist"
          >
            <li
              style="padding-left:10px;"
              class="swiper-slide"
              v-for="(sofaimg,index) in data.moduleContent.products"
              :key="index"
              @click="getsofaid(sofaimg)"
            >
              <div>
                <img style="width:90px;heigth:90px;" :src="sofaimg.productImg" alt />
                <p
                  style="width:90px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center;"
                >
                  <span>{{sofaimg.productTitle}}</span>
                </p>
                <p class="sofaprice">
                  <span>￥{{sofaimg.sellPrice}}</span>
                  <span
                    style=" text-decoration:line-through;color:#cccccc;"
                  >￥{{sofaimg.originalPrice}}</span>
                </p>
              </div>
            </li>
          </swiper>
        </ul>
        <!-- 居家餐桌 -->
        <ul v-if="bottomindex===1" class="hometable">
          <li
            class="diningtable"
            v-for="(tableimg,tableindex) in data.moduleContent.products"
            :key="tableindex"
            v-show="tableindex<6"
            @click="getsofaid(tableimg)"
          >
            <img style="width:182px;heigth:182px;" :src="tableimg.productImg" alt />
            <p style="margin-left:10px;font-size:14px;color:#808080">{{tableimg.productName}}</p>
            <p style="margin-left:10px;">
              <span style="font-size:14px;">￥{{tableimg.sellPrice}}</span>
              <span style="text-decoration:line-through;color:#cccccc;">￥{{tableimg.originalPrice}}</span>
            </p>
          </li>
        </ul>
        <!-- 舒适座椅 -->
        <ul v-if="bottomindex===2" class="comfortablechair hometable">
          <li
            class="chairs diningtable"
            v-for="(chairimg,chairindex) in data.moduleContent.products"
            :key="chairindex"
            v-show="chairindex<6"
            @click="getsofaid(chairimg)"
          >
            <img style="width:182px;heigth:182px;" :src="chairimg.productImg" alt />
            <p style="margin-left:10px;font-size:14px;color:#808080">{{chairimg.productName}}</p>
            <p style="margin-left:10px;">
              <span style="font-size:14px;">￥{{chairimg.sellPrice}}</span>
              <span style="text-decoration:line-through;color:#cccccc;">￥{{chairimg.originalPrice}}</span>
            </p>
          </li>
        </ul>
        <!-- 热门分类 -->
        <ul v-if="bottomindex===3" class="hot">
          <li
            style="width:75px;"
            class="swiper-slide"
            v-for="(hotimg,hotindex) in data.moduleContent.banners"
            :key="hotindex"
            @click="gethotimg(hotimg)"
          >
            <div class="hotimgbox">
              <img style="width:75px;heigth:88px;" :src="hotimg.bannerImgSrc" alt />
            </div>
          </li>
        </ul>
        <p v-if="bottomindex<3" style="margin:20px 0 20px 0;">查看全部</p>
        <p v-if="bottomindex===3" style="margin:20px 0 20px 0;">已经到底了</p>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios'
import 'swiper/css/swiper.min.css'
import swiper from '@/components/no_vswiper'
export default {
  data () {
    return {
      bottomlist: null,
      // 顶部轮播图
      toplist: null
    }
  },
  methods: {
    getid (data) {
      this.$router.push(`/item/${data.bannerLinkTargetId}`)
    },
    getsofaid (data) {
      this.$router.push(`/item/${data.productId}`)
      this.$store.commit('setDataList',data)
    },
    gethotimg (data) {
      this.$router.push(`/item/${data.bannerLinkTargetId}`)
      this.$store.commit('setDataList',data)
    }
  },
  components: {
    swiper
  },
  mounted () {
    // 接口
    // https://m.wowdsgn.com/v2/page?pageId=1&tabId=10005&currentPage=1&pageSize=8&_=1583309616856
    axios
      .get(
        '/v2/page?pageId=1&tabId=10005&currentPage=1&pageSize=8&_=1583309616856'
      )
      .then(res => {
        var arr = res.data.data.modules.filter((item, index) => {
          if (index !== 0) {
            return item
          }
        })
        this.bottomlist = arr
        this.toplist = res.data.data.modules[0].moduleContent
        console.log(this.bottomlist)
        console.log(this.toplist)
      })
  }
}
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.bigbox {
  background-color: #f1efef;
  margin-bottom: 50px;
}
li {
  list-style: none;
}
.imgsize {
  width: 375px;
  height: 200px;
}
.moduleContent {
  margin-top: 10px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 12px;
  .headline {
    font-size: 18px;
    font-weight: 600;
    margin: 25px 0 20px 0;
  }
  .sofaprice {
    display: flex;
    justify-content: space-between;
  }
  .hometable {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    box-sizing: border-box;
    .diningtable {
      padding: 0 0 30px 0;
      width: 50%;
      box-sizing: border-box;
      border: 1px solid #f7f7f7;
    }
  }
  .hometable li:nth-child(odd) {
    border-left: none;
  }
  .hometable li:nth-child(even) {
    border-right: none;
  }
  .hot {
    display: flex;
    justify-content: space-between;
    padding: 0 15px 0 15px;
  }
}
</style>
